<template>
  <div class="report">
    <h2>统计报表</h2>
    <el-row>
      <el-col :span="24">
        <!-- 添加chartRef引用 -->
        <v-chart ref="chartRef" class="chart" :option="chartOption" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import { statsCustomers } from '@/api/customers';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

// 注册必要组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

export default defineComponent({
  name: 'ReportList',
  components: {
    VChart
  },
  setup() {
    const chartRef = ref(null); // 图表实例引用
    const chartOption = ref({
      title: {
        text: '每日客户新增数量',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['新增客户数量'],
        align: 'right',
        right: 10
      },
      grid: {
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '新增客户数量',
          type: 'line',
          yAxisIndex: 0,
          smooth: true,
          areaStyle: {
            opacity: 0.1
          },
          data: []
        }
      ]
    });

    // 获取客户统计数据并更新图表数据
    const fetchCustomerStats = async () => {
      try {
        const response = await statsCustomers();
        const stats = response.data;

        // 调试日志
        console.log('[API Response]', stats);
        const dates = stats.map(stat => stat.date);
        const newCustomers = stats.map(stat => stat.new_customers);
        console.log('[Mapped Dates]', dates);
        console.log('[Mapped Data]', newCustomers);

        // 使用响应式更新
        chartOption.value = {
          ...chartOption.value,
          xAxis: [{
            ...chartOption.value.xAxis[0],
            data: dates
          }],
          series: [{
            ...chartOption.value.series[0],
            data: newCustomers
          }]
        };

        // 手动触发重绘
        if (chartRef.value) {
          chartRef.value.setOption(chartOption.value, true);
        }
      } catch (error) {
        console.error('[API Error]', error);
        // 可在此处添加错误提示
      }
    };

    onMounted(() => {
      fetchCustomerStats();
    });

    return {
      chartOption,
      chartRef
    };
  }
});
</script>

<style scoped>
.report {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chart {
  height: 400px;
  width: 100%; /* 确保宽度自适应 */
  margin-top: 20px;
}
</style>